<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>小米商城</title>
		<link rel="stylesheet"href="./css/xiaomi.css">
		<style>
			a{
				text-decoration: none;
			}
			li{
				list-style:none;
			}
		</style>
	</head>
	<body>
		<!-- 黑色模块start -->
		<div class="black-nav">
			<div class="wrap">
				<ul class="black-nav-left"> 
					<li><a href="#">小米官网</a><span>|</span></li>
					<li><a href="#">小米商城</a><span>|</span></li>
					<li><a href="#">小米澎湃OS</a><span>|</span></li>
					<li><a href="#">小米澎湃OS</a><span>|</span></li>
					<li><a href="#">云服务</a><span>|</span></li>
					<li><a href="#">loT</a><span>|</span></li>
					<li><a href="#">有品</a><span>|</span></li>
					<li><a href="#">小爱开放平台</a><span>|</span></li>
					<li><a href="#">资质证照</a><span>|</span></li>
					<li><a href="#">协议规则</a><span>|</span></li>
					<li><a href="#">下载app</a><span>|</span></li>
					<li><a href="#"> Select Location</a><span>|</span></li>
				</ul>
				<ul class="black-nav-right">
					<li><a href="#">登录</a><span>|</span></li>
					<li><a href="#">注册</a><span>|</span></li>
					<li><a href="#">消息通知</a><span>|</span></li>
					<li class="calt"><a href="#">购物车(0)</a></li>
				</ul>
			</div>
		</div>
		<!-- 白色模块start -->
		<div class="white-nav">
			<div class="wrap">
				<div class="logo">
					<img src="img/logo.webp"ait=""class="logo">
				</div>	
				<div class="nav-bar">
					<ul>
						<li><a href="#"></a></li>
						<li><a href="#">xiaomi手机</a></li>
						<li><a href="#">Redmi手机</a></li>
						<li><a href="#">电视</a></li>
						<li><a href="#">笔记本</a></li>
						<li><a href="#">平板</a></li>
						<li><a href="#">家电</a></li>
						<li><a href="#">路由器</a></li>
						<li><a href="#">服务中心</a></li>
						<li><a href="#">社区</a></li>
					</ul>
				</div>
				<div class="search">
					<input type="test" placeholder="元宇宙"
					<div class="stu">
						<button class="iconfont">&#xe63d;</button>
					</div>	
				
			</div> 
		</div>
		<!-- banner模块start -->
		<div class="banner">
			<div class="wrap">
				<img class="banner-img" src="img/2.webp">
				<div class="slide">
					<ul>
						<li><a href="#">手机<i class="iconfont">&#xe621;</i></a></li>
						<li><a href="#">电视<i class="iconfont">&#xe621;</i></a></li>
						<li><a href="#">电脑<i class="iconfont">&#xe621;</i></a></li>
						<li><a href="#">笔记本 平板<i class="iconfont">&#xe621;</i></a></li>
						<li><a href="#">出行 穿戴<i class="iconfont">&#xe621;</i></a></li>
						<li><a href="#">耳机 音箱<i class="iconfont">&#xe621;</i></a></li>
						<li><a href="#">健康 儿童<i class="iconfont">&#xe621;</i></a></li>
						<li><a href="#">生活 箱包<i class="iconfont">&#xe621;</i></a></li>
						<li><a href="#">智能 路由器<i class="iconfont">&#xe621;</i></a></li>
						<li><a href="#">电源 配件<i class="iconfont">&#xe621;</i></a></li>
					</ul>
				</div>
				
			</div>
		</div>
		<!-- 广告模块start -->
		<div class="ad">
			<div class="wrap">
				<div class="ad-aside">
					<ul>
						<li>
							<a href="#">
								<i class="iconfont">&#xe733;</i>
								<p>米粉卡</p>
							</a>
						</li>
						<li>	
							<a href="#">
								<i class="iconfont">&;</i>
								<p>米粉卡</p>
							</a>
						</li>
						<li>
							<a href="#">
								<i class="iconfont">&;</i>
								<p>米粉卡</p>
							</a>
						</li>
						<li>	
							<a href="#">
								<i class="iconfont">&;</i>
								<p>米粉卡</p>
							</a>
						</li>
						<li>	
							<a href="#">
								<i class="iconfont">&;</i>
								<p>米粉卡</p>
							</a>
						</li>
						<li>	
							<a href="#">
								<i class="iconfont">&;</i>
								<p>米粉卡</p>
							</a>
						</li>
					</ul>
				</div>
				
			
					<div class="ad-img">
						<a href="#"><img src="img/tu1.png" alt="">
					</div>
					<div class="ad-img">
						<a href="#"><img src="img/tu1.png" alt="">
					</div>
					<div class="ad-img">
						<a href="#"><img src="img/tu1.png" alt=""></a>
					</div>
		</div>	
		<div class="content">
			<div class="wrap">
				<!-- 手机模块 -->
				<div class="phon">
					<span  class="title">手机</span>
					<span class="title-right">查看更多</span>
					<div class="phone-box">
						<div class="phone-box-left">
							<a href="#">
								<img src="img/tu2.webp"alt="">
							</a>
						</div>
						<div class="phone-box-right">
							<div class="item">
								<a href="#">
									<img class="item-img" src="img/tu3.webp"alt="">
									<p class="item-name">Redmi Turbo3</p>
									<p class="item-desc">性能旋风，席卷而来</p>
									<p class="item-prise">1899元起 1999元</p>
								</a>
							</div>
							<div class="item">
								<a href="#">
									<img class="item-img" src="img/tu3.webp"alt="">
									<p class="item-name">Redmi Turbo3</p>
									<p class="item-desc">性能旋风，席卷而来</p>
									<p class="item-prise">1899元起 1999元</p>
								</a>
							</div>
							<div class="item">
								<a href="#">
									<img class="item-img" src="img/tu3.webp"alt="">
									<p class="item-name">Redmi Turbo3</p>
									<p class="item-desc">性能旋风，席卷而来</p>
									<p class="item-prise">1899元起 1999元</p>
								</a>
							</div>
							<div class="item">
								<a href="#">
									<img class="item-img" src="img/tu3.webp"alt="">
									<p class="item-name">Redmi Turbo3</p>
									<p class="item-desc">性能旋风，席卷而来</p>
									<p class="item-prise">1899元起 1999元</p>
								</a>
							</div>
							<div class="item">
								<a href="#">
									<img class="item-img" src="img/tu3.webp"alt="">
									<p class="item-name">Redmi Turbo3</p>
									<p class="item-desc">性能旋风，席卷而来</p>
									<p class="item-prise">1899元起 1999元</p>
								</a>
							</div>
							<div class="item">
								<a href="#">
									<img class="item-img" src="img/tu3.webp"alt="">
									<p class="item-name">Redmi Turbo3</p>
									<p class="item-desc">性能旋风，席卷而来</p>
									<p class="item-prise">1899元起 1999元</p>
								</a>
							</div>
							<div class="item">
								<a href="#">
									<img class="item-img" src="img/tu3.webp"alt="">
									<p class="item-name">Redmi Turbo3</p>
									<p class="item-desc">性能旋风，席卷而来</p>
									<p class="item-prise">1899元起 1999元</p>
								</a>
							</div>
							<div class="item">
								<a href="#">
									<img class="item-img" src="img/tu3.webp"alt="">
									<p class="item-name">Redmi Turbo3</p>
									<p class="item-desc">性能旋风，席卷而来</p>
									<p class="item-prise">1899元起 1999元</p>
								</a>
							</div>
						</div>	
					</div>
				<!-- 手机模块 -->
				<div class="phon">
					<span class="title">智能穿戴</span>
					<span class="title-right">耳机 穿戴</span>
					<div class="phone-box">
						<div class="phone-box-left">
							<a href="#">
								<img src="img/zheneng.webp"alt="">
							</a>
						</div>
						<div class="phone-box-right">
							<div class="item">
								<a href="#">
									<img class="item-img" src="img/reji.webp"alt="">
									<p class="item-name">Redmi Turbo3</p>
									<p class="item-desc">性能旋风，席卷而来</p>
									<p class="item-prise">1899元起 1999元</p>
								</a>
							</div>
							<div class="item">
								<a href="#">
									<img class="item-img" src="img/reji.webp"alt="">
									<p class="item-name">Redmi Turbo3</p>
									<p class="item-desc">性能旋风，席卷而来</p>
									<p class="item-prise">1899元起 1999元</p>
								</a>
							</div>
							<div class="item">
								<a href="#">
									<img class="item-img" src="img/reji.webp"alt="">
									<p class="item-name">Redmi Turbo3</p>
									<p class="item-desc">性能旋风，席卷而来</p>
									<p class="item-prise">1899元起 1999元</p>
								</a>
							</div>
							<div class="item">
								<a href="#">
									<img class="item-img" src="img/reji.webp"alt="">
									<p class="item-name">Redmi Turbo3</p>
									<p class="item-desc">性能旋风，席卷而来</p>
									<p class="item-prise">1899元起 1999元</p>
								</a>
							</div>
							<div class="item">
								<a href="#">
									<img class="item-img" src="img/erji1.webp"alt="">
									<p class="item-name">Redmi Turbo3</p>
									<p class="item-desc">性能旋风，席卷而来</p>
									<p class="item-prise">1899元起 1999元</p>
								</a>
							</div>
							<div class="item">
								<a href="#">
									<img class="item-img" src="img/erji1.webp"alt="">
									<p class="item-name">Redmi Turbo3</p>
									<p class="item-desc">性能旋风，席卷而来</p>
									<p class="item-prise">1899元起 1999元</p>
								</a>
							</div>
							<div class="item">
								<a href="#">
									<img class="item-img" src="img/erji1.webp"alt="">
									<p class="item-name">Redmi Turbo3</p>
									<p class="item-desc">性能旋风，席卷而来</p>
									<p class="item-prise">1899元起 1999元</p>
								</a>
							</div>
							<div class="item">
								<a href="#">
									<img class="item-img" src="img/erji1.webp"alt="">
									<p class="item-name">Redmi Turbo3</p>
									<p class="item-desc">性能旋风，席卷而来</p>
									<p class="item-prise">1899元起 1999元</p>
								</a>
							</div>
						</div>	
					</div>
				<!-- 手机模块 -->
				<div class="phon">
					<span class="title">笔记本 | 电脑</span>
					<span class="title-right1">热门</span>
					<div class="phone-box">
						<div class="phone-box-left">
							<a href="#">
								<img src="img/pingban.webp"alt="">
							</a>
						</div>
						<div class="phone-box-right">
							<div class="item">
								<a href="#">
									<img class="item-img" src="img/diannao.webp"alt="">
									<p class="item-name">Redmi Turbo3</p>
									<p class="item-desc">性能旋风，席卷而来</p>
									<p class="item-prise">1899元起 1999元</p>
								</a>
							</div>
							<div class="item">
								<a href="#">
									<img class="item-img" src="img/diannao.webp"alt="">
									<p class="item-name">Redmi Turbo3</p>
									<p class="item-desc">性能旋风，席卷而来</p>
									<p class="item-prise">1899元起 1999元</p>
								</a>
							</div>
							<div class="item">
								<a href="#">
									<img class="item-img" src="img/diannao.webp"alt="">
									<p class="item-name">Redmi Turbo3</p>
									<p class="item-desc">性能旋风，席卷而来</p>
									<p class="item-prise">1899元起 1999元</p>
								</a>
							</div>
							<div class="item">
								<a href="#">
									<img class="item-img" src="img/diannao.webp"alt="">
									<p class="item-name">Redmi Turbo3</p>
									<p class="item-desc">性能旋风，席卷而来</p>
									<p class="item-prise">1899元起 1999元</p>
								</a>
							</div>
							<div class="item">
								<a href="#">
									<img class="item-img" src="img/diannao.webp"alt="">
									<p class="item-name">Redmi Turbo3</p>
									<p class="item-desc">性能旋风，席卷而来</p>
									<p class="item-prise">1899元起 1999元</p>
								</a>
							</div>
							<div class="item">
								<a href="#">
									<img class="item-img" src="img/diannao.webp"alt="">
									<p class="item-name">Redmi Turbo3</p>
									<p class="item-desc">性能旋风，席卷而来</p>
									<p class="item-prise">1899元起 1999元</p>
								</a>
							</div>
							<div class="item">
								<a href="#">
									<img class="item-img" src="img/diannao.webp"alt="">
									<p class="item-name">Redmi Turbo3</p>
									<p class="item-desc">性能旋风，席卷而来</p>
									<p class="item-prise">1899元起 1999元</p>
								</a>
							</div>
							<div class="item">
								<a href="#">
									<img class="item-img" src="img/diannao.webp"alt="">
									<p class="item-name">Redmi Turbo3</p>
									<p class="item-desc">性能旋风，席卷而来</p>
									<p class="item-prise">1899元起 1999元</p>
								</a>
							</div>
						</div>	
					</div>
						</div>	
					</div>												
				</div>			
			</div>
		</div>	
		<!-- 页脚模块 -->
		<div class="footer">
			<div class="wrap">
				<div class="footer-service">
					<ul>
						<li>
							<a href="#">
								<i class="iconfont">&#xe629;</i>
								<span>预约维修服务</span>
							</a>
						</li>
						<li>
							<a href="#">
								<i class="iconfont">&#xe629;</i>
								<span>7天无理由退货</span>
							</a>
						</li>
						<li>
							<a href="#">
								<i class="iconfont">&#xe629;</i>
								<span>15天免费换货</span>
							</a>
						</li>
						<li>
							<a href="#">
								<i class="iconfont">&#xe629;</i>
								<span>满69包邮</span>
							</a>
						</li>
						<li>
							<a href="#">
								<i class="iconfont">&#xe629;</i>
								<span>1100余家售后网点</span>
							</a>
						</li>
					</ul>
				</div>
				<div class="footer-link">
					<ul>
						<li>选购指南</li>
						<li><a href="#">手机</a></li>
						<li><a href="#">电视</a></li>
						<li><a href="#">笔记本</a></li>
						<li><a href="#">平板</a></li>
						<li><a href="#">穿戴</a></li>
						<li><a href="#">耳机</a></li>
						<li><a href="#">家电</a></li>
						<li><a href="#">路由器</a></li>
						<li><a href="#">音箱</a></li>
						<li><a href="#">配件</a></li>
					</ul>
					<ul>
						<li>服务中心</li>
						<li><a href="#">申请售后</a></li>
						<li><a href="#">售后政策</a></li>
						<li><a href="#">维修服务价格</a></li>
						<li><a href="#">订单查询</a></li>
						<li><a href="#">以旧换新</a></li>
						<li><a href="#">保障服务</a></li>
						<li><a href="#">防伪查询</a></li>
						<li><a href="#">F码通道</a></li>
					</ul>
					<ul>
						<li>线下门店</li>
						<li><a href="#">小米之家</a></li>
						<li><a href="#">服务网点</a></li>
						<li><a href="#">授权体验店/专区</a></li>
					</ul>
					<ul>
						<li>关于小米</li>
						<li><a href="#">了解小米</a></li>
						<li><a href="#">加入小米</a></li>
						<li><a href="#">投资者关系</a></li>
						<li><a href="#">可持续发展</a></li>
						<li><a href="#">廉洁举报</a></li>
					</ul>
					<ul>
						<li>关注我们</li>
						<li><a href="#">新浪微博</a></li>
						<li><a href="#">官方微信</a></li>
						<li><a href="#">联系我们</a></li>
						<li><a href="#">公益基金会</a></li>
					</ul>
					<div class="footer-aside">
						<p class="tel">400-100-5678</p>
						<p class="time">8:00-18:00（仅收市话费)</p>
						<a href="#" class="kefu">人工客服</a>
						<p class="tel">400-180-8888</p>
						<p class="time">8:00-18:00（仅收市话费)</p>
						<p class="time">适用于：MIX FOLD、巨屏电视系列</p>
						<a href="#" class="kefu">人工客服</a>
					</div>
				</div>
			</div>
		</div>
		
	</body>	
	
	</html>	
		
		
		
		
	

